<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <!-- 问题 -->
    <div class="w-full p-4">
      <div class="mb-6 flex justify-between items-center">
        <h1 class="text-2xl font-bold">{{$t("page.budget.ResponsibleGambling")}}</h1>
        <van-icon
          class="cursor-pointer close-icon"
          @click="backPage"
          name="cross"
        />
      </div>
      <div class="responsive-layout">
        <div class="sidebar font-semibold mb-6 md:mb-0 rounded text-sm">
          <button
            @click="
              activeTab = 'tab1';
              tabSelected = 'tab1';
            "
            :class="{
              'active-tab': activeTab === 'tab1',
              '': activeTab !== 'tab1'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white rounded-none"
          >
            Stake Smart
          </button>
          <button
            @click="
              activeTab = 'tab2';
              tabSelected = 'tab2';
            "
            :class="{
              'active-tab': activeTab === 'tab2',
              '': activeTab !== 'tab2'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            Responsible Gambling FAQ's
          </button>
          <button
            @click="
              activeTab = 'tab3';
              tabSelected = 'tab3';
            "
            :class="{
              'active-tab': activeTab === 'tab3',
              '': activeTab !== 'tab3'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            Recognise the Signs
          </button>
          <button
            @click="
              activeTab = 'tab4';
              tabSelected = 'tab4';
            "
            :class="{
              'active-tab': activeTab === 'tab4',
              '': activeTab !== 'tab4'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            Self-Assessment
          </button>
          <button
            @click="
              activeTab = 'tab5';
              tabSelected = 'tab5';
            "
            :class="{
              'active-tab': activeTab === 'tab5',
              '': activeTab !== 'tab5'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
          {{$t("page.budget.budget")}}
          </button>
        </div>

        <select
          class="sidebar-2 bg-[#0f212e] p-4 mb-2 rounded"
          v-model="tabSelected"
          @change="selectChange"
        >
          <option value="tab1">Stake Smart</option>
          <option value="tab2">Responsible Gambling FAQ's</option>
          <option value="tab3">Recognise the Signs</option>
          <option value="tab4">Self-Assessment</option>
          <option value="tab5">{{$t("page.budget.budget")}}</option>
        </select>
        <div class="content w-full bg-[#0f212e] p-4 rounded-md">
          <!-- Stake Smart -->
          <div v-if="activeTab === 'tab1'">
            <div class="w-full mx-auto text-[#b1bad3]">
              <h1 class="text-3xl font-bold mb-4">Stake Smart</h1>
              <h2 class="text-xl font-semibold mb-2">Mission statement</h2>
              <p class="mb-6">
                Stake is dedicated to fostering responsible gambling practices
                to all customers on our platform and within our community. We
                are committed to ensuring that our customers are educated on our
                various responsible gambling tools available for use, promote
                gambling as a form of entertainment and empowering individuals
                to make informed decisions about their gambling activities.
              </p>

              <h2 class="text-xl font-semibold mb-2">
                5 Tips For Effective Management Of Your Gambling Activities
              </h2>
              <ul class="list-disc list-inside mb-6">
                <li>
                  Effective management of your gambling activities can be done
                  by prioritizing other recreational activities too
                </li>
                <li>
                  Before a gambling session, have a plan in mind of how much you
                  want to spend gambling, and how long you will be gambling for
                </li>
                <li>Do not spend more than what you can afford to lose</li>
                <li>
                  Understanding the odds and knowing the risks associated with
                  gambling
                </li>
                <li>
                  Identify when you are no longer having fun or where gambling
                  has become a problem for you, and stop
                </li>
                <li>
                  Set loss limits , wager limits to assist with managing your
                  gambling activities
                </li>
              </ul>

              <h2 class="text-xl font-semibold mb-2">Knowing the Odds</h2>
              <p class="mb-6">
                There are a lot of myths and misconceptions about gambling -
                understanding the odds of gambling helps put the chances of
                winning into perspective.
              </p>
              <p class="mb-6">
                Stake offers two products, Casino and Sportsbook.
              </p>
              <p class="mb-6">
                Both products have different win rates and probability that
                players need to be aware of, which will help to understand the
                risks associated with gambling.
              </p>

              <h3 class="text-lg font-semibold mb-2">
                House Advantage/House Edge
              </h3>
              <p class="mb-6">
                Games have a house edge to ensure a percentage of the total
                amount wagered is returned to the House, which in this case is
                Stake.
              </p>

              <h3 class="text-lg font-semibold mb-2">Randomness</h3>
              <p class="mb-6">
                All gambling has an element of randomness - there is no way to
                control the outcome of any casino game or sporting event.
              </p>

              <h3 class="text-lg font-semibold mb-2">Independent Outcomes</h3>
              <p class="mb-6">
                Games/Spins are not related. Their outcomes are not dependent on
                how much, or how long, you’ve previously played the game for.
              </p>

              <h3 class="text-lg font-semibold mb-2">Odds and Probability</h3>
              <p class="mb-6">
                Odds and probability are ways to describe your chances of
                winning. Whilst the odds can appear to be low, there are no
                certainties in betting.
              </p>

              <h2 class="text-xl font-semibold mb-2">
                Introducing Our Responsible Gambling Tools
              </h2>
              <p class="mb-6">
                Gambling should always be a form of entertainment. In order to
                assist you in keeping your gambling activities fun, Stake has a
                range of responsible gambling tools which you are able to make
                use of at any point in time.
              </p>
              <p class="mb-6">Play for fun, not for funds.</p>

              <h3 class="text-lg font-semibold mb-2">Gambling Limits</h3>

              <h4 class="text-md font-semibold mb-2">Loss limit</h4>
              <p class="mb-6">
                A loss limit allows you to set a limit on how much you can
                afford to lose over your set period of time. The limit can be
                set over a period of one day, one week or one month. It is a net
                loss limit. Profits made during your set period will not count
                towards your limit amount. If you are profitable during the set
                period, you are able to use your profits to continue to wager
                and bet until you reach your loss limit. Unsettled bets count
                towards the limit. Please check your unsettled bets if you are
                unable to place bets, as these unsettled bets may be causing you
                to reach your limit.
              </p>

              <h4 class="text-md font-semibold mb-2">Wager limit</h4>
              <p class="mb-6">
                A wager limit (or betting limit) allows you to set a limit on
                how much you can wager over your set period of time. The maximum
                bet limit can be set over a period of one day, one week or one
                month. The limit is not a net limit so profits are excluded.
                This means, if you are profitable during the period these
                profits are not offset against your maximum bet limit.
              </p>
              <p class="mb-6">
                To increase or decrease your limits you must remove existing
                limits and create new limits. Upon removing limits a 24-hour
                cool off period will commence before you are able to create your
                new limit.
              </p>

              <h4 class="text-md font-semibold mb-2">Self-Exclusion</h4>
              <p class="mb-6">
                A self-exclusion allows you to set a limit on your account which
                will restrict your ability to sign in and use your account if
                you are aware of a gambling problem , or in some cases, believe
                you currently have one.
              </p>
              <p class="mb-6">The available periods are as follows:</p>
              <ul class="list-disc list-inside mb-6">
                <li>6 Months</li>
                <li>1 Year</li>
                <li>Permanent</li>
              </ul>
              <p class="mb-6">
                Stake also provides alternative options to suspend your account
                temporary, known as temporary exclusion . Whether you would like
                to take a break from gambling to re-evaluate your personal
                goals, save some money or simply spend time on other activities,
                the option is made available to you.
              </p>
              <p class="mb-6">The available periods are as follows:</p>
              <ul class="list-disc list-inside mb-6">
                <li>1 Day</li>
                <li>1 Week</li>
                <li>1 Month</li>
                <li>3 Months</li>
              </ul>
              <p class="mb-6">
                Note: Stake reserves the right to self-exclude a customers
                account should we determine that gambling may not be safe for
                you to continue.
              </p>

              <h2 class="text-xl font-semibold mb-2">Help Organizations</h2>
              <p class="mb-6">
                If you are worried about yourself, or if someone you know is
                having problems managing their gambling, there are several
                external support agencies that can assist with providing advice.
              </p>
              <p class="mb-6">
                Talk to someone you trust about your gambling – such as a close
                friend or family member, a religious or community leader,
                doctor, or other health professional.
              </p>
              <p class="mb-6">
                <strong>Gamblers Anonymous</strong><br />
                Website:
                <a href="https://gamblersanonymous.org/ga/" target="_blank"
                  >https://gamblersanonymous.org/ga/</a
                >
              </p>
              <p class="mb-6">
                <strong>Gambling Therapy</strong><br />
                Website:
                <a href="https://www.gamblingtherapy.org/" target="_blank"
                  >https://www.gamblingtherapy.org/</a
                ><br />
                Contact:
                <a href="mailto:support@gamblingtherapy.org"
                  >support@gamblingtherapy.org</a
                >
              </p>

              <h2 class="text-xl font-semibold mb-2">Minors</h2>
              <p class="mb-6">Stake.com does not support underage gambling.</p>
              <p class="mb-6">
                Underage gambling is illegal, and is defined as anyone who is
                under the age of 18 years old at the time of account
                registration.
              </p>
              <p class="mb-6">
                No winnings should be paid to such players if identified as
                someone who is underage.
              </p>

              <h3 class="text-lg font-semibold mb-2">Tips for Parents</h3>
              <ul class="list-disc list-inside mb-6">
                <li>
                  Do not leave your computer unattended when your casino
                  software is running.
                </li>
                <li>Password-protect your casino program.</li>
                <li>
                  Do not allow minors to participate in any gambling activity.
                </li>
                <li>
                  Keep your casino account number and payment card(s) out of
                  reach of minors.
                </li>
                <li>Do not save passwords onto your computer.</li>
                <li>
                  Limit the amount of time your children spend online and make
                  use of software to prevent your children from accessing
                  inappropriate material.
                </li>
              </ul>

              <h2 class="text-xl font-semibold mb-2">Gambling Blocks</h2>
              <p class="mb-6">
                There are gambling site blocker apps available to help restrict
                access to gambling websites as a protective measure in
                safeguarding yourself, or in some instances, safeguarding the
                risk of gambling exposure to a minor. Betblocker
              </p>
              <p class="mb-6">
                <a href="https://www.betblocker.org/" target="_blank"
                  >https://www.betblocker.org/</a
                >
              </p>
              <p class="mb-6">
                <strong>Netnanny:</strong><br />
                Netnanny offers protective measures which varies from website
                and app blocks to parental controls.<br />
                Website:
                <a href="https://www.netnanny.com/" target="_blank"
                  >https://www.netnanny.com/</a
                >
              </p>
              <p class="mb-6">
                <strong>Gamblock:</strong><br />
                Gamblock is a mobile app that blocks access to thousands of
                gambling websites and provides access to useful resources.<br />
                Website:
                <a href="http://www.gamblock.com/" target="_blank"
                  >http://www.gamblock.com/</a
                >
              </p>
              <p class="mb-6">
                *Stake does not accept any liability in respect of any
                third-party software.
              </p>
            </div>
          </div>
          <!-- Responsible Gambling FAQ's -->
          <div v-if="activeTab === 'tab2'">
            <div class="w-full mx-auto bg-[#0f212e] rounded-lg text-[#b1bac9]">
              <h1 class="text-2xl font-bold mb-4">
                Responsible Gambling FAQ's
              </h1>
              <div class="mb-4">
                <h2 class="text-xl font-semibold mb-2">
                  Isn't problem gambling just a financial problem?
                </h2>
                <p>
                  No. Problem gambling is a behavioural addiction that has
                  financial and other consequences. Even if the person pays off
                  their gambling debts, they still can have other problems
                  caused by gambling.
                </p>
              </div>
              <div class="mb-4">
                <h2 class="text-xl font-semibold mb-2">
                  Do you have to wager often to be considered as someone being
                  affected by problem gambling?
                </h2>
                <p>
                  It really doesn't matter how often a person wagers. If a
                  person's gambling is causing emotional, physical, financial,
                  relationship or other challenges for themselves and the people
                  around them, then they are affected as a result of problem
                  gambling.
                </p>
              </div>
              <div class="mb-4">
                <h2 class="text-xl font-semibold mb-2">
                  How much money do you have to lose before gambling is a
                  problem?
                </h2>
                <p>
                  The amount of money lost or won does not determine when
                  gambling becomes problematic. Problem gambling is a
                  behavioural addiction, of which negatively affects ones
                  finances simply as a direct result of the behavioural
                  addiction. While gambling can cause financial problems, it is
                  not the only warning sign of a gambling problem. When gambling
                  affects an individual's relationships, job, mental, physical
                  or financial well-being, it is problematic.
                </p>
              </div>
              <div class="mb-4">
                <h2 class="text-xl font-semibold mb-2">
                  Who is at risk for problem gambling?
                </h2>
                <p>
                  Problem gambling does not discriminate and can impact anyone
                  who gambles regardless of economic, social, cultural or levels
                  of education. Anyone who gambles can develop a gambling
                  problem. Certain factors can increase your risk of developing
                  a gambling addiction, genetics, environment, medical history
                  and age may all play a role.
                </p>
              </div>
              <div class="mb-4">
                <h2 class="text-xl font-semibold mb-2">
                  How can I protect myself from problem gambling?
                </h2>
                <ul class="list-disc list-inside">
                  <li>Educate yourself on the risks associated to gambling</li>
                  <li>
                    Understand that gambling is entertainment, not a source of
                    income
                  </li>
                  <li>
                    Use of Responsible Gambling tools plays a critical role in
                    managing your gambling activities
                  </li>
                  <li>Budget for your gambling activities</li>
                  <li>
                    Avoid chasing losses or wins, no bet outcome is guaranteed
                  </li>
                  <li>
                    When the fun stops, it is a clear indication that you need
                    to stop
                  </li>
                </ul>
              </div>
              <div class="mb-4">
                <h2 class="text-xl font-semibold mb-2">
                  What are responsible gambling interactions?
                </h2>
                <p>
                  Responsible gambling interactions are communicated in the form
                  of an email or software messaging. These interactions are
                  aimed at promoting healthy gambling activity, assisting you in
                  understanding the tools and resources available in order to
                  manage your gambling activities. They typically include
                  information about setting limits , recognizing signs of
                  problem gambling, and accessing support resources.
                </p>
              </div>
              <div>
                <h2 class="text-xl font-semibold mb-2">Help Organizations</h2>
                <p>
                  If you are worried about yourself, or if someone you know is
                  having problems managing their gambling, there are several
                  external support agencies that can assist with providing
                  advice.
                </p>
                <p class="mt-2">Gamblers Anonymous</p>
                <p>
                  Website:
                  <a
                    href="https://gamblersanonymous.org/ga/"
                    class="text-blue-400 hover:underline"
                    >https://gamblersanonymous.org/ga/</a
                  >
                </p>
                <p class="mt-2">Gambling Therapy</p>
                <p>
                  Website:
                  <a
                    href="https://www.gamblingtherapy.org/"
                    class="text-blue-400 hover:underline"
                    >https://www.gamblingtherapy.org/</a
                  >
                </p>
                <p class="mt-2">
                  Contact:
                  <a
                    href="mailto:support@gamblingtherapy.org"
                    class="text-blue-400 hover:underline"
                    >support@gamblingtherapy.org</a
                  >
                </p>
              </div>
            </div>
          </div>
          <!-- Recognise the Signs -->
          <div v-if="activeTab === 'tab3'">
            <div class="w-full mx-auto bg-[#0f212e] rounded-lg text-[#b1bac9]">
              <h1 class="text-2xl font-bold mb-4">
                How can gambling affect me?
              </h1>
              <section class="mb-6">
                <h2 class="text-xl font-bold mb-2">
                  Recognise the signs of gambling dependency?
                </h2>
                <p class="mb-4">
                  Often we find it is easier identifying problem gambling in
                  others, but harder to recognise when this affects us as
                  individuals. Although problem gambling often results in
                  financial problems – the impact of problem gambling usually
                  stretches much further than this. Recognizing the effects of
                  gambling dependency is crucial in identifying and addressing
                  the problem before it escalates further. Gambling dependency,
                  also known as gambling addiction or gambling disorder, can
                  have profound consequences on various aspects of an
                  individual's life.
                </p>
              </section>
              <section class="mb-6">
                <h2 class="text-xl font-bold mb-2">
                  Is gambling affecting my mental health?
                </h2>
                <p class="mb-4">
                  Problem gambling can have a serious impact on your mental
                  health. Do any of these statements sound familiar to you?
                </p>
                <ul class="list-disc list-inside mb-4">
                  <li>I have extreme emotions or mood swings</li>
                  <li>I feel that gambling is the only thing I really enjoy</li>
                  <li>I have difficulty sleeping</li>
                  <li>I often feel depressed or anxious</li>
                  <li>I have suicidal thoughts</li>
                  <li>I use gambling to avoid difficulties</li>
                </ul>
              </section>
              <section class="mb-6">
                <h2 class="text-xl font-bold mb-2">
                  Is gambling affecting my relationships?
                </h2>
                <p class="mb-4">
                  Gambling addiction can have a serious impact on relationships
                  which can make it even harder on the gambler. Consider the
                  following:
                </p>
                <ul class="list-disc list-inside mb-4">
                  <li>
                    I'm arguing more with my partner or family – especially
                    about money, budgeting and debt.
                  </li>
                  <li>
                    I'm preoccupied with gambling and finding it difficult to
                    focus on other things.
                  </li>
                  <li>
                    I'm spending less time with my friends and more time
                    gambling.
                  </li>
                  <li>
                    I'm not able to tell people the truth about how much I have
                    lost.
                  </li>
                  <li>
                    I'm stealing money from friends and family to gamble with.
                  </li>
                </ul>
                <p class="mb-4">
                  The impact of gambling on relationships is profound and
                  multifaceted, affecting not only the individuals directly
                  involved but also their loved ones, including children.
                  Recognizing the signs of gambling addiction and seeking help
                  <a class="text-blue-500" href="#"> early </a>
                  is crucial in mitigating its destructive effects on
                  relationships. Counseling, therapy, support groups, and
                  financial guidance can provide individuals and families with
                  the tools they need to navigate the challenges posed by
                  gambling addiction and rebuild their relationships on a
                  foundation of trust, communication, and mutual support.
                </p>
              </section>
              <section class="mb-6">
                <h2 class="text-xl font-bold mb-2">
                  Is gambling affecting my finances?
                </h2>
                <p class="mb-4">
                  One of the most obvious ways in which gambling can become
                  problematic is when debt begins to mount or when savings or
                  money meant for other things is being spent on gambling.
                </p>
                <p class="mb-4">
                  Do any of these statements describe your situation?
                </p>
                <ul class="list-disc list-inside mb-4">
                  <li>I am struggling to pay my bills on time.</li>
                  <li>I am juggling my credit card debt.</li>
                  <li>I have taken out a payday loan.</li>
                  <li>I am using business money to gamble with.</li>
                  <li>I have gambled with my savings.</li>
                  <li>
                    I am hiding my financial situation from those close to me.
                  </li>
                </ul>
                <p class="mb-4">
                  Recognizing the signs of gambling addiction and seeking
                  professional help
                  <a class="text-blue-500" href="#"> early </a>
                  is paramount in mitigating the financial fallout and regaining
                  control over one's financial future. Through counseling,
                  support groups, and financial planning, individuals can break
                  free from the grip of gambling addiction and embark on a path
                  towards financial stability and recovery.
                </p>
                <p class="mb-4">
                  Stake is committed to responsible gambling, for more
                  information visit
                  <a
                    class="text-blue-500"
                    href="https://www.gamblingtherapy.org"
                  >
                    https://www.gamblingtherapy.org
                  </a>
                </p>
                <p>
                  Contact:
                  <a
                    class="text-blue-500"
                    href="mailto:support@gamblingtherapy.org"
                  >
                    support@gamblingtherapy.org
                  </a>
                </p>
              </section>
            </div>
          </div>
          <!-- Self-Assessment -->
          <div v-if="activeTab === 'tab4'">
            <div class="w-full mx-auto bg-[#0f212e] rounded-lg text-[#b1bac9]">
              <div class="flex justify-end">
                <button class="text-gray-400 hover:text-gray-200">
                  <i class="fas fa-times"></i>
                </button>
              </div>
              <h1 class="text-2xl font-bold mb-4">Self-Assessment</h1>
              <p class="mb-4">
                Gambling can be an enjoyable pastime for many people, providing
                entertainment and the thrill of taking a risk. However, for some
                individuals, gambling can become more than just a harmless
                activity. It can develop into a serious problem that affects
                various aspects of their lives. Recognizing the signs of problem
                gambling is the first step towards addressing this issue. This
                self-assessment tool is designed to help you reflect on your
                gambling behaviour and determine whether it may be causing
                problems in your life. It is essential to approach this
                assessment with honesty and openness to gain a clear
                understanding of your gambling habits.
              </p>
              <p class="mb-4">
                Do you have a gambling problem? Ask yourself the following
                questions:
              </p>
              <ol class="list-decimal list-inside space-y-2 mb-4">
                <li>
                  Have there ever been periods lasting two weeks or longer when
                  you spent a lot of time thinking about your gambling
                  experiences, planning out future gambling ventures or bets, or
                  thinking about ways of getting money to gamble with?
                </li>
                <li>
                  Have there ever been periods when you needed to gamble with
                  increasing amounts of money or with larger bets than before in
                  order to get the same feeling of excitement?
                </li>
                <li>
                  Have you ever felt restless or irritable when trying to stop,
                  cut down, or control your gambling?
                </li>
                <li>
                  Have you tried and not succeeded in stopping, cutting down, or
                  controlling your gambling three or more times in your life?
                </li>
                <li>
                  Have you ever gambled to escape from personal problems, or to
                  relieve uncomfortable feelings such as guilt, anxiety,
                  helplessness, or depression?
                </li>
                <li>
                  Has there ever been a period when, if you lost money gambling
                  one day, you would often return another day to get even?
                </li>
                <li>
                  Have you lied to family members, friends, or others about how
                  much you gamble, and/or about how much money you lost on
                  gambling, on at least three occasions?
                </li>
                <li>
                  Have you ever written a bad cheque or taken money that didn't
                  belong to you from family members, friends, or anyone else in
                  order to pay for your gambling?
                </li>
                <li>
                  Has your gambling ever caused serious or repeated problems in
                  your relationships with any of your family members or friends?
                  Or, has your gambling ever caused you problems at work or your
                  studies?
                </li>
                <li>
                  Have you ever needed to ask family members, friends, a lending
                  institution, or anyone else to loan you money or otherwise
                  bail you out of a desperate money situation that was largely
                  caused by your gambling?
                </li>
              </ol>
              <p class="mb-4">
                *REMINDER: this self-assessment will help you figure out if
                there is, or you are developing a problem. If you answered yes
                to one or more of the above questions, you should seek help.
              </p>
              <p class="text-sm">
                Stake is committed to responsible gambling, for more information
                visit
                <a
                  href="https://www.gamblingtherapy.org"
                  class="text-blue-400 underline"
                  >https://www.gamblingtherapy.org</a
                >
              </p>
            </div>
          </div>
          <!-- 预算计算器 -->
          <div
            v-if="activeTab === 'tab5'"
            class="bg-[#1a2c38] w-full rounded-md border border-[#2f4553]"
          >
            <h1 class="text-xl font-bold p-4 mb-0 pb-0">{{$t("page.budget.Mbudget")}}</h1>
            <p class="text-sm p-4 text-[#b1bad3]">
              {{$t("page.budget.information")}}
            </p>
            <div class="h-[1px] bg-[#2f4553]"></div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 text-[#b1bad3]">
              <div>
                <h2 class="text-lg font-semibold mb-2">{{$t("page.budget.Income")}}</h2>
                <div class="space-y-2">
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Wagesafterdeductions")}}</span>
                    <span class="text-xs">${{ income.salary.toFixed(2) }}</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      v-model.number="income.salary"
                      @input="validateInput('income', 'salary')"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      step="0.01"
                      min="0"
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Pensions")}}</span>
                    <span class="text-xs"
                      >${{ income.pension.toFixed(2) }}</span
                    >
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      v-model.number="income.pension"
                      @input="validateInput('income', 'pension')"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      step="0.01"
                      min="0"
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm">Benefits</span>
                    <span class="text-xs"
                      >${{ income.benefits.toFixed(2) }}</span
                    >
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      v-model.number="income.benefits"
                      @input="validateInput('income', 'benefits')"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      step="0.01"
                      min="0"
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Otherincome")}}</span>
                    <span class="text-xs">${{ income.other.toFixed(2) }}</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      v-model.number="income.other"
                      @input="validateInput('income', 'other')"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      step="0.01"
                      min="0"
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Totalincome")}}</span>
                    <span class="text-xs">${{ totalIncome }}</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      :value="totalIncome"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      readonly
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                </div>
              </div>
              <div>
                <h2 class="text-lg font-semibold mb-2">{{$t("page.budget.Expenses")}}</h2>
                <div class="space-y-2">
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Rent/mortgage")}}</span>
                    <span class="text-xs">${{ expenses.rent.toFixed(2) }}</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      v-model.number="expenses.rent"
                      @input="validateInput('expenses', 'rent')"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      step="0.01"
                      min="0"
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Utilitybills")}}</span>
                    <span class="text-xs"
                      >${{ expenses.utilities.toFixed(2) }}</span
                    >
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      v-model.number="expenses.utilities"
                      @input="validateInput('expenses', 'utilities')"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      step="0.01"
                      min="0"
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Loans/credit")}}</span>
                    <span class="text-xs"
                      >${{ expenses.loans.toFixed(2) }}</span
                    >
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      v-model.number="expenses.loans"
                      @input="validateInput('expenses', 'loans')"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      step="0.01"
                      min="0"
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Otherexpenses")}}</span>
                    <span class="text-xs"
                      >${{ expenses.other.toFixed(2) }}</span
                    >
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      v-model.number="expenses.other"
                      @input="validateInput('expenses', 'other')"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      step="0.01"
                      min="0"
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm">{{$t("page.budget.Totalexpenses")}}</span>
                    <span class="text-xs">${{ totalExpenses }}</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <input
                      type="number"
                      :value="totalExpenses"
                      class="bg-[#2f4553] text-white p-2 rounded w-full"
                      readonly
                    />
                    <button class="bg-green-600 p-2 rounded">
                      <van-icon name="gold-coin" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="h-[1px] bg-[#2f4553]"></div>
            <div class="p-4">
              <div class="bg-[#2f4553] text-white rounded p-4">
                <div class="flex justify-between items-center">
                  <span>{{$t("page.budget.Disposableincome")}}</span>
                </div>
                <div class="flex items-center space-x-2 mt-2">
                  <span>${{ disposableIncome }}</span>
                  <button class="bg-green-600 p-1 rounded-full">
                    <span class="text-black">$</span>
                  </button>
                </div>
              </div>
              <div
                v-if="disposableIncome < 0"
                class="p-4 mt-4 rounded-lg border-2 border-dashed border-[#ff9d00] text-[#ff9d00] flex items-center text-sm"
              >
                <van-icon style="color: #ff9d00" name="info" />
                <p class="mb-0 ml-2">
                  您每月的开支超过您每月的收入。 我们强烈建议您实施并使用
                  <span class="font-semibold cursor-pointer"
                    >更安全的博彩工具</span
                  >。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const activeTab = ref("tab1");

const income = ref({
  salary: 0,
  pension: 0,
  benefits: 0,
  other: 0
});
const expenses = ref({
  rent: 0,
  utilities: 0,
  loans: 0,
  other: 0
});
const totalIncome = computed(() => {
  return (
    income.value.salary +
    income.value.pension +
    income.value.benefits +
    income.value.other
  ).toFixed(2);
});
const totalExpenses = computed(() => {
  return (
    expenses.value.rent +
    expenses.value.utilities +
    expenses.value.loans +
    expenses.value.other
  ).toFixed(2);
});
const disposableIncome = computed(() => {
  return (totalIncome.value - totalExpenses.value).toFixed(2);
});
const validateInput = (type, field) => {
  if (type === "income") {
    if (income.value[field] < 0) {
      income.value[field] = 0;
    }
  } else if (type === "expenses") {
    if (expenses.value[field] < 0) {
      expenses.value[field] = 0;
    }
  }
};
const backPage = () => {
  router.go(-1);
};
const tabSelected = ref("tab1");
const selectChange = () => {
  activeTab.value = tabSelected.value;
};
</script>
<style scoped lang="less">
@media (min-width: 600px) {
  .responsive-layout {
    display: flex;
    position: relative;
  }
  .sidebar-2 {
      display: none !important;
    }
  .responsive-layout .sidebar {
    width: 220px;
    height: 300px;

    display: block;
    margin-right: 20px;
    background-color: unset;
    border-radius: 0;
    position: sticky;
    top: 2rem;
    padding: 0;
    display: block;
    .btn {
      width: 220px;

      background-color: #0f212e;
      border-radius: 0;
      text-align: left;
    }
  }
  .responsive-layout .content {
    // flex-grow: 1;
  }
  .active-tab {
    background-color: #071824 !important;
    border-left: 3px solid #1475e1 !important;
  }
}
.content {
  overflow: auto;
  table {
    min-width: 900px;
  }
}
.sidebar {
  background-color: #071824;
  display: flex;
  border-radius: 40px;
  padding: 0.5rem;
  display: none;
  .btn {
    width: 220px;
    height: 40px;
    border-radius: 40px;
    text-align: center;
    border-left: 3px solid #071824;
  }
}

.sidebar-2 {
  display: block;
}
.active-tab {
  background-color: #2f4553;
}
.ipt-dark {
  background-color: #0f212e;
  border: 2px solid #2f4553;
}
.ipt-dark:hover {
  border-color: #557086;
}
.close-icon:hover {
  color: white;
}
.close-icon {
  font-size: 18px;
  color: #b1bad3;
}
:deep(.van-pagination__item) {
  border-radius: 5px;
  background-color: #0f212e;
  padding: 0;
  .btn {
    border: unset;
    outline: unset;
  }
}
:deep(.van-hairline--surround:after) {
  border: unset;
  outline: unset;
}
h2,
h1 {
  color: #fff;
  margin-top: 0;
}
</style>
